<template>
  <div id="address" class="address">
    <select v-bind:class="{active: isActive}" v-model="province" :disabled="downShow" @change="changeProvince">
      <option value="">省</option>
      <option :value="item.region.name" v-for="item in cityData">{{item.region.name}}</option>
    </select>
    <select v-bind:class="{active: isActive}" v-model="state" :disabled="downShow" @change="changeState">
      <option value="">市</option>
      <option :value="item.name" v-for="item in regions">{{item.name}}</option>
    </select>
    <select v-bind:class="{active: isActive}" v-model="area" :disabled="downShow" @change="changeArea">
      <option value="">区</option>
      <option :value="item.name" v-for="item in areas">{{item.name}}</option>
    </select>
  </div>
</template>
<script type="text/javascript">
import cityData from './cityData'
export default {
  props: {
    isActive: Boolean,
    downShow: Boolean
  },
  data() {
    return {
      cityData: cityData,
      province: '',
      area: '',
      state: ''
    }
  },
  methods: {
    changeProvince() {
      if (!this.province) {
        this.province = ''
      }
      this.state = ''
      this.area = ''
      this.$emit('addressChanged')
    },
    changeState() {
      this.area = ''
      this.$emit('addressChanged')
    },
    changeArea() {
      this.$emit('addressChanged')
    }
  },
  computed: {
    regions() {
      if (!this.province) {
        return []
      } else {
        var arr = []
        cityData.forEach((item, index) => {
          if (this.province === item.region.name) {
            arr = item.region.state
          }
        })
        return arr
      }
    },
    areas() {
      if (!this.state) {
        return []
      } else {
        var arr2 = []
        this.regions.forEach((item, index) => {
          if (this.state === item.name) {
            arr2 = item.city
          }
        })
        return arr2
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.address {
  display: inline-block;
}

select {
  width: 150px;
  margin-right: 7px;
  height: 40px;
  border: 1px solid #ddd;
}

select.active {
  background-color: #d8e7ff;
  width: 86px;
  height: 30px;
}

</style>
